<template>
  <div ref="si-detail-table" class="si-detail-table">
    <table>
      <tr v-for="(tr, index) in list" :key="index">
        <td
          v-for="(td, index2) in tr"
          :key="index2"
          :colspan="td.colspan || 1"
          :style="'width:' + 100 / column + '%'"
        >
          <div class="wrap">
            <div class="label">{{ td.label }}</div>
            <div class="value">{{ data[td.value] }}</div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  props: {
    labels: {
      type: Array,
      require: true,
      default() {
        return []
      }
    },
    data: {
      type: Object,
      require: true,
      default() {
        return {}
      }
    },
    column: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.list = this.labels
      this.resetRows(this.labels)
    })
  },
  methods: {
    resetRows(labels) {
      this.list = []
      labels.map((v, idx) => {
        const num = Math.floor(idx / this.column)
        if (!this.list[num]) {
          this.list[num] = []
        }
        console.log(num)
        this.list[num].push(v)
      })
      const len = this.column - this.list[this.list.length - 1].length
      if (len > 0) {
        for (let index = 0; index < len; index++) {
          this.list[this.list.length - 1].push({})
        }
      }

      console.log(this.list, 'this.list')
    }
  }
}
</script>
<style lang="scss" scoped>
.si-detail-table {
  table {
    width: 100%;
    border-collapse: collapse;
    td {
      border: 1px solid #dfe6ec;
      padding: 0;
    }
  }
  .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    font-size: 12px;
    .label {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 40%;
      flex: 0 0 40%;
      display: flex;
      background: #ededed;
      min-height: 48px;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 0 10px;
    }
    .value {
      -webkit-box-flex: 1;
      -ms-flex: 1 0 58%;
      flex: 1 0 58%;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      min-height: 48px;
      padding: 0 10px;
    }
  }
}
</style>
